<template>
  <div class="pro">
    <div class="pro-box">
      <!-- 头部 -->
      <div class="pro-head">
        <!-- 标签 -->
        <div class="tag-box">
          <div class="pro-tag iconfont">&#xe60b;&nbsp;我的图库</div>
          <!-- 标签的三角 -->
          <div class="triangle-box">
            <span class="tag-triangle"></span>
          </div>
        </div>
        <!-- 导航栏 -->
        <ul class="pro-bar">
          <li><a class="bar">全部</a></li>
        </ul>
      </div>

      <!-- 图片内容大盒子 -->
      <div class="pro-content-box">
        <!-- 内容盒子 -->
        <div class="content-box" v-for="item in proLIst" :key="item.id">
          <!-- 饿了么图片盒子 :preview-src-list="srcList"-->
          <el-image :src="item.url" :preview-src-list="srcList" fit="fill">
          </el-image>
          <!--图片 底部id -->
          <span class="pro-id">{{ item.createBy }}</span>
          <!--图片 右上 标签 -->
          <span class="content-pro-tag">{{ item.title }}</span>
          <!-- 遮罩层 -->
          <div class="pro-mask">
            <div class="mask-id iconfont">
              &#xe60b;&nbsp;{{ item.tagsName }}
            </div>
            <div class="mask-date iconfont">
              &#xe667;&nbsp;{{ item.createDate }}
            </div>
            <!-- 预留动画 -->
            <span class="mask-move iconfont">&#xe63a;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //  接口
  import { postPro } from '../../api/pro.js';
  // 日期格式
  import * as dayjs from 'dayjs';
  export default {
    name: 'Pro',
    data() {
      return {
        srcList: [],
        proLIst: [],
      };
    },
    methods: {
      async getProAll() {
        const { data: res } = await postPro();
        console.log(res.data);
        this.proLIst = res.data;
        this.proLIst.forEach(val => {
          val.createDate = dayjs(val.createDate).format('YYYY-MM-DD');
        });
      },
    },
    created() {
      this.getProAll();
    },
  };
</script>

<style lang="less" scoped>
  //  饿了么 图片样式
  .el-image__inner {
    // position: relative;
    width: 100%;
    height: 100%;
    // flex: 1;
  }
  @import url('../../state/css/barList/pro.less');
</style>
